<template>
  <div class="form-item gap-3">
    <div class="inline-flex items-center gap-2">
      <slot name="front" />
      <input class="grow" :type="props.type" :placeholder="props.placeholder" v-model="model">
      <slot name="behind" />
    </div>
    <div class="divider-x"></div>
  </div>
</template>

<script setup lang='ts'>

interface IProps {
  type?: string
  placeholder?: string
}

const props = defineProps<IProps>()
const model = defineModel()

</script>

<style></style>